<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#huabu{opacity:0.5}
</style>
</head>
<script>
	window.onload=function(){
		var huabu=document.getElementById('huabu');
		var hua=huabu.getContext('2d');
		hua.fillStyle='black';
		hua.fillRect(0,0,1000,600);
		var huo=[];
		for(var j=0;j<50;j++){
				huo[j]={};
				huo[j].x=parseInt(Math.random()*1000);
				huo[j].y=parseInt(Math.random()*-1000);
				huo[j].num=0;
		}
		
	
		shengcheng();
		function shengcheng(){
			
			hua.clearRect(0,0,1000,600)
			hua.fillStyle='black';
			hua.fillRect(0,0,1000,600);
			//num++
			for(var i=0;i<50;i++){
				hua.beginPath();
				hua.lineCap='round'
				var n1=huo[i].num
				var n2=huo[i].y
				if(huo[i].x<250){
					gad=hua.createLinearGradient(0,n2,0,n1)
					gad.addColorStop(0.8,'black');
					
					gad.addColorStop(1,'green');
					
				}
				if(huo[i].x>=250&&huo[i].x<500){
					gad=hua.createLinearGradient(0,n2,0,n1)
					gad.addColorStop(0.8,'black');
				
					gad.addColorStop(1,'yellow');
					
				}
				if(huo[i].x<750&&huo[i].x>=500){
					gad=hua.createLinearGradient(0,n2,0,n1)
					gad.addColorStop(0.8,'black');
					
					gad.addColorStop(1,'red');
					
				}
				if(huo[i].x>=750&&huo[i].x<1000){
					gad=hua.createLinearGradient(0,n2,0,n1)
					gad.addColorStop(0.8,'black');
					
					gad.addColorStop(1,'#f90');
					
				}
				hua.strokeStyle=gad;
				hua.lineWidth=5;
				luoxia()
				function luoxia(){
				huo[i].num+=4
				
				hua.moveTo(huo[i].x,huo[i].y)
				hua.lineTo(huo[i].x,huo[i].y+huo[i].num)
				
				hua.stroke();
				hua.closePath();
				if(huo[i].y+huo[i].num>600){
					huo[i].y=0;
					huo[i].num=0;
					luoxia();
					}
				
				}
				}
				setTimeout(shengcheng,20)
				
				
			}
			
			
		}
</script>
<body>
<canvas id="huabu" style="#" width="1000" height="600"></canvas>
</body>
</html>